<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .cartlist {
      display: none;
    }

    .active {
      color: red;
    }

    .list img {
      width: 60px;
      height: 60px;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <h1>华联超市的购买中心</h1>
  <div class="btn_wrap">
    <button class="active">首页</button> <button>购物车</button>
  </div>
  <!-- list部分 -->
  <div>
    <div class="list prolist">
      <div class="list_one">
        <img src="" alt=""> <span>13123</span> <span>13123</span>
        <button>加入购物车</button>
      </div>
    </div>
    <!-- cart部分 -->
    <div class="list cartlist">
      <div class="list_one">
        <img src="" alt=""> <span>13123</span> <span>13123</span>
        <button>-</button>
        <input type="text">
        <button>+</button>
      </div>
    </div>
  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script>
    function loadList() {
      $.ajax({
        url: "http://127.0.0.1:82/users/getlist",
        type: "post",
        success: function (res) {
          var str = ""
          $.each(res, function (index, ele) {
            str += ` <div class="list_one">
              <img src="./images/${ele.imgsrc}.jpg" alt=""> <span>${ele.pname}</span> <span>${ele.price}</span>
              <button onclick=add(${JSON.stringify(ele)})>加入购物车</button>
            </div>`
          })
          $(".prolist").html(str)
        }
      })
    }
    loadList()
    // 添加购物车
    function add(ele) {
      $.ajax({
        url: "http://127.0.0.1:82/users/addcart",
        type: "post",
        data: ele,
        success: function () {
          loadCart()//渲染购物车
          // 提示
          $("<h2>加入购物车成功</h2>").appendTo($(".prolist")).css("color", "red");
          setTimeout(function () {
            $(".prolist h2").remove();
          }, 2000)
        }
      })
    }
    // 切换
    $(".btn_wrap button").click(function () {
      $(this).addClass("active").siblings().removeClass("active")
      var index = $(this).index();
      $(".list").eq(index).show().siblings().hide();
    })
    // 加载购物车列表
    function loadCart() {
      $.ajax({
        url: "http://127.0.0.1:82/users/getcart",
        type: "post",
        success: function (res) {
          var str = ""
          $.each(res, function (index, ele) {
            str += ` <div class="list_one">
                <img src="./images/${ele.imgsrc}.jpg" alt=""> <span>${ele.pname}</span> <span>${ele.price}</span>
                <button onclick="updateNum('${ele._id}','${ele.num}','min')">-</button>
                <input type="text" value="${ele.num}"> 
                <button onclick="updateNum('${ele._id}','${ele.num}','plus')">+</button>
              </div>`
          })
          $(".cartlist").html(str)
        }
      })
    }
    loadCart()
    // 更新数量的接口调用
    function updateNum(_id, num, status) {
      if (status == "plus") {
        num++
      } else {
        num--
        if (num <= 1) {
          num = 1
        }
      }
      $.ajax({
        url: "http://127.0.0.1:82/users/updateNum",
        type: "post",
        data: {
          _id: _id,
          num: num
        },
        success: function () {
          loadCart()
        }
      })
    }
  </script>
</body>

</html>